// @import './config.scss';
// @import './mixin.scss';
.modal {
    @include position(fixed);
    z-index: 10;
   transition: all .5s;
    .mask {
        @include position(fixed);
        background-color: $colorI;
        opacity: 0.5;
    }

   &.slide-enter-active{
       top: 0;
   }
   &.slide-leave-active{
       top: -100%
   }
   &.slide-enter{
    top: -100%;
}
    .modal-dialog {
        @include position(absolute, 40%, 50%, 660px, auto);
        background-color: $colorG;
        transform: translate(-50%, -50%);

        .modal-header {
            height: 60px;
            background-color: $colorJ;
            padding: 0 25px;
            line-height: 60px;
            font-size: 16px;

            .icon-close {
                @include positionImg (absolute, 23px, 25px, 14px, 14px, '/imgs/icon-close.png');
                transition: transform .2s;

                &:hover {
                    transform: scale(1.5);
                }
            }
        }
        .modal-body{
            padding: 42px 40px 54px ;
            font-size: 14px;
            background-color: $colorJ;

        }
        .modal-footer{
            height: 82px;
            line-height: 82px;
            text-align: center;
            background-color: $colorJ;
        }
    }
}